<style lang="less" scoped>
  .page__wrapper {
    width: 100%;
    height: 100%;
  }
</style>
<style lang="less">
  .summary {
    .el-table {
      overflow: auto;
    }
    .el-table__body-wrapper,
    .el-table__header-wrapper,
    .el-table__footer-wrapper {
      overflow: visible !important;
    }
    .el-table::after {
      position: relative !important;
    }
  }
</style>
<template>
  <div class="page__wrapper summary">
    <simple-table :table-column="tableColumn" :table-data="tableData" @sort-change='handleSortChange' :table-page-info="tablePageInfo" :table-data-count="tableDataTotalCount" showSummary :summaryMethod="getSummaries" @page-info-change="handlePageInfoChange">
      <template slot-scope="scope" slot="company">
        <el-tag size="mini" style="cursor: pointer;" disable-transitions @click="handleCompanyClick(scope.row)" v-if="scope.row.companyCategory !== 'sys_office_category_3'">{{scope.row.companyName}}</el-tag>
        <span v-else>{{scope.row.companyName}}</span>
      </template>
      <template slot-scope="scope" slot="totalAmount">
        {{ scope.row.totalAmount | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="receivableAmount">
        {{ scope.row.receivableAmount | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="occupyAmount">
        {{ scope.row.occupyAmount | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="liabilityAmount">
        {{ scope.row.liabilityAmount | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="payAmount">
        {{ scope.row.payAmount | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="netAssetsAmount">
        {{ scope.row.netAssetsAmount | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="debtRatio">
        {{ scope.row.debtRatio | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="totalAmount1">
        {{ scope.row.totalAmount1 | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="receivableAmount1">
        {{ scope.row.receivableAmount1 | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="occupyAmount1">
        {{ scope.row.occupyAmount1 | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="liabilityAmount1">
        {{ scope.row.liabilityAmount1 | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="payAmount1">
        {{ scope.row.payAmount1 | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="netAssetsAmount1">
        {{ scope.row.netAssetsAmount1 | judgeNullAmount }}
      </template>
      <template slot-scope="scope" slot="debtRatio1">
        {{ scope.row.debtRatio1 | judgeNullAmount }}
      </template>

      <template slot="searchSection">
        <simple-form v-model="searchModel" :form-field="searchFormField">
          <template slot="tableOperation">
            <el-button @click="handleDataSearch">{{$t('operation.search')}}</el-button>
            <el-button type="primary" @click="handleExportClick">{{$t('operation.export')}}</el-button>
          </template>
        </simple-form>
      </template>
    </simple-table>
  </div>
</template>
<script>

/** 混入分页信息及数据总数信息 */
import pageMixins from '@/components/base/simple-table/page-mixins'
import utils from '@/utils/index'

const BASEURL = {
  list: '/api/business/balancesheet/demoBalanceSheet/report',
  export: '/api/business/balancesheet/demoBalanceSheet/report/export',

  office: '/api/system/office/list'
}

export default {
  name: 'debt_report',
  mixins: [pageMixins],
  components: {},
  data () {
    return {
      searchModel: { accountPeriod: '2019', quarter: '1', company: this.$store.state.app.userInfo.company },
      /** 表格数据 */
      tableData: [],
      sumData: {},
      rowData: {},
      /** 是否显示详情页 dialog */
      isShowDetailDialog: false,

      companyLoadingFlag: false,
      companyList: [],
      /** 是否为查看数据 */
      isViewFlag: false
    }
  },
  filters: {
    judgeNullAmount (value) {
      if (typeof (value) === 'undefined') return '-'
      else return value
    }
  },
  computed: {
    searchFormField () {
      return [
        { prop: 'accountPeriod', label: this.$t('debt_balance.accountPeriod'), type: 'Datepicker', component: { clearable: true, type: 'year', valueFormat: 'yyyy' } },
        { prop: 'quarter', label: this.$t('debt_balance.quarter'), type: 'Select', component: { optionList: this.quarter, clearable: true } },
        {
          prop: 'company',
          label: this.$t('debt_balance.superiorCompany'),
          type: 'SearchableInput',
          component: {
            remoteMethod: this.getCompanyList,
            loading: this.companyLoadingFlag,
            optionList: this.companyList,
            valueKey: 'id'
            // clearable: true
          },
          event: {
            focus: () => {
              this.getCompanyList()
            }
            // clear: () => {
            //   delete this.searchModel.company
            // }
          }
        },
        { slotName: 'tableOperation', col: { xs: 12, sm: 16, md: 6, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    },
    tableColumn () {
      return [
        { label: this.$t('debt_balance.company'), prop: 'companyName', width: 180, slotName: 'company' },
        {
          label: this.$t('debt_report.endAmount'),
          children: [
            { label: this.$t('debt_balance.totalAmount'), prop: 'totalAmount', width: 150, sortable: 'custom', slotName: 'totalAmount' },
            { label: this.$t('debt_balance.receivableAmount'), prop: 'receivableAmount', width: 250, sortable: 'custom', slotName: 'receivableAmount' },
            { label: this.$t('debt_balance.occupyAmount'), prop: 'occupyAmount', width: 270, sortable: 'custom', slotName: 'occupyAmount' },
            { label: this.$t('debt_balance.liabilityAmount'), prop: 'liabilityAmount', width: 150, sortable: 'custom', slotName: 'liabilityAmount' },
            { label: this.$t('debt_balance.payAmount'), prop: 'payAmount', width: 200, sortable: 'custom', slotName: 'payAmount' },
            { label: this.$t('debt_balance.netAssetsAmount'), prop: 'netAssetsAmount', width: 140, sortable: 'custom', slotName: 'netAssetsAmount' },
            { label: this.$t('debt_balance.debtRatio'), prop: 'debtRatio', minWidth: 170, sortable: 'custom', slotName: 'debtRatio' }
          ]
        },
        {
          label: this.$t('debt_report.startAmount'),
          children: [
            { label: this.$t('debt_balance.totalAmount'), prop: 'totalAmount1', width: 150, slotName: 'totalAmount1' },
            { label: this.$t('debt_balance.receivableAmount'), prop: 'receivableAmount1', width: 250, slotName: 'receivableAmount1' },
            { label: this.$t('debt_balance.occupyAmount'), prop: 'occupyAmount1', width: 270, slotName: 'occupyAmount1' },
            { label: this.$t('debt_balance.liabilityAmount'), prop: 'liabilityAmount1', width: 150, slotName: 'liabilityAmount1' },
            { label: this.$t('debt_balance.payAmount'), prop: 'payAmount1', width: 200, slotName: 'payAmount1' },
            { label: this.$t('debt_balance.netAssetsAmount'), prop: 'netAssetsAmount1', width: 140, slotName: 'netAssetsAmount1' },
            { label: this.$t('debt_balance.debtRatio'), prop: 'debtRatio1', minWidth: 170, slotName: 'debtRatio1' }
          ]
        }
      ]
    },
    quarter () {
      return this.$getDictList('quarter')
    }
  },
  /**
   * 注入到子组件
   */
  provide () {
    return { handleDataSearch: this.handleDataSearch }
  },
  methods: {
    handleDataSearch () {
      let searchFilter = Object.assign({}, { page: this.tablePageInfo }, this.searchModel)
      let loadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })
      this.$axios
        .post(BASEURL.list, searchFilter)
        .then(resp => {
          let respData = resp.data
          this.sumData = respData.count
          this.tableData = respData.page.list
          this.tablePageInfo = { pageNo: respData.page.pageNo, pageSize: respData.page.pageSize }
          this.tableDataTotalCount = respData.page.count
        })
        .finally(() => {
          loadingFlag.close()
        })
    },
    handleExportClick () {
      let year = this.searchModel.accountPeriod
      let quarter = this.searchModel.quarter
      let params = { accountPeriod: this.searchModel.accountPeriod, quarter: this.searchModel.quarter }
      let fileName = `${year}年${quarter}季度报表.xlsx`
      utils.fileExportAs(BASEURL.export, params, fileName)
    },
    handleSortChange (sortInfo) {
      this.tablePageInfo.orderBy = sortInfo.prop
      this.tablePageInfo.orderSort = (sortInfo.order === 'ascending' ? 'asc' : 'desc')
      this.handleDataSearch()
    },

    getCompanyList (name) {
      this.companyLoadingFlag = true
      this.$axios.post(BASEURL.office, { level: this.$store.state.app.userInfo.company.level + 1 })
        .then(resp => {
          let respData = resp.data
          this.companyList = respData.list.map(item => { return { key: item.id, value: item, label: item.name } })
        })
        .finally(() => { this.companyLoadingFlag = false })
    },

    handleCompanyClick (rowData) {
      if (rowData.companyCategory === 'sys_office_category_3') return

      this.companyList = [{ key: rowData.companyId, value: { id: rowData.companyId, name: rowData.companyName }, label: rowData.companyName }]
      this.$set(this.searchModel, 'company', { id: rowData.companyId, name: rowData.companyName })

      this.handleDataSearch()
    },

    initialSelectOptionList () {
      this.companyList = [{ key: this.$store.state.app.userInfo.company.id, value: this.$store.state.app.userInfo.company, label: this.$store.state.app.userInfo.company.name }]
    },

    getSummaries () {
      if (!this.sumData) return []
      return ['合计',
        this.sumData.totalAmount,
        this.sumData.receivableAmount,
        this.sumData.occupyAmount,
        this.sumData.liabilityAmount,
        this.sumData.payAmount,
        this.sumData.netAssetsAmount,
        this.sumData.debtRatio,
        this.sumData.totalAmount1,
        this.sumData.receivableAmount1,
        this.sumData.occupyAmount1,
        this.sumData.liabilityAmount1,
        this.sumData.payAmount1,
        this.sumData.netAssetsAmount1,
        this.sumData.debtRatio1]
    }
  },
  mounted () {
    this.handleDataSearch()
    this.initialSelectOptionList()
  }
}
</script>
